Buttons template

message = {
  "type": "template",
  "altText": "在不支援顯示樣板的地方顯示的文字",
  "template": {
    "type": "buttons",
    "text": "標題文字",
    "actions": [
      {
        "type": "message",
        "label": "第一個按鈕",
        "text": "1"
      },
      {
        "type": "message",
        "label": "第二個按鈕",
        "text": "2"
      },
      {
        "type": "message",
        "label": "第三個按鈕",
        "text": "3"
      },
      {
        "type": "message",
        "label": "第四個按鈕",
        "text": "4"
      }
    ]
  }
}

跟 Confirm 不同的地方在於，Button 最少可以只放一個按鈕。

在這邊有幾個比較特別的 type 分別是 postback、message 與 uri

以下的 postback 在使用者按下的時候可以用 event postback 接收這個資訊來做後續處理

{
   "type":"postback",
   "label":"Buy",
   "data":"action=buy&itemid=111",
   "text":"Buy"
}

以下的 message 代表使用者按下去會自動變成輸入文字模式，而 label 通常與 text 設定一樣就可以了

{
  type: 'message',
  label: 'HOWHOW鐵人賽',
  text: 'HOWHOW鐵人賽',
}

以下的 uri 代表使用者按下後會導入 webview

{
   "type": "action",
   "action": {
         "type": "uri",
         "label": "Menu",
         "uri": "https://example.com/menu"
   }
}

Carousel template

Carousel template可用的型態和Buttons Template一樣
Carousel template就像很多個Buttons Template，一次最多可以有10則

message = {
  "type": "template",
  "altText": "this is a carousel template",
  "template": {
    "type": "carousel",
    "columns": [
      {
        "text": "標題 1",
        "actions": [
          {
            "type": "message",
            "label": "buttom 1",
            "text": "1"
          }
        ]
      },
      {
        "text": "標題 2",
        "actions": [
          {
            "type": "message",
            "label": "buttom 2",
            "text": "2"
          }
        ]
      }
    ]
  }
}

columns
其實跟 Buttons 差不多，把部分內容搬移到 columns 然後多放幾個，就可以作出 Carousel 了。
最多可以放 10 個 column，也可以只放一個 column，只放一個就跟 Buttons 幾乎一樣了，唯一不同的地方是 Carousel 的按鈕最多只能放 3 個。

Image carousel template

message = {

  "type": "template",
  "altText": "this is a image carousel template",
  "template": {
    "type": "image_carousel",
    "columns": [
      {
        "imageUrl": "圖片網址",
        "action": {
          "type": "message",
          "label": "第一張圖",
          "text": "1"
        }
      },
      {
        "imageUrl": "圖片網址",
        "action": {
          "type": "message",
          "label": "第二張圖",
          "text": "2"
        }
      }
    ]
  }
}

跟 Carousel 比起來，這個其實還蠻單純的，他的圖片只能是正方形。不過他的 action label 是選填的，不填就不會顯示文字在圖片上。

總結

基本上 Template message 已經可以完成許多對話視窗的使用者行為了，不過美中不足就是電腦版沒有辦法顯示，所以明天我們就來介紹 Flex Message 把這個美中不足解決掉！！！

今天的歌曲是 周杰倫-七里香 Qi-Li-Xiang
https://www.youtube.com/watch?v=Bbp9ZaJD_eA&list=PLFl6Na2uUoOZBEhBtQ_jeGA4P1V20JvpW&index=28&ab_channel=%E5%91%A8%E6%9D%B0%E5%80%ABJayChou